/*页面样式*/
.main-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 50px);
  padding: 0.5rem !important;
}
.secondary-content{
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 50px);
  padding-bottom: 0.5rem !important;
}

.col-main-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 66px);
  //padding: 0.5rem !important;
}

.hasTagsViewColMainContent {
  height: calc(100vh - 100px);
  //padding: 0.5rem !important;

  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    display: flex;
    flex-direction: column;
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}

.tree-main-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 0.5rem !important;
}

.card-content {
  flex: 1;
  flex-direction: column;
  margin-bottom: 0.5rem;
  //border-radius: 0.25rem;
}
.spin-absolute {
  position: absolute;
height: 100%;
  transform: translate(0%, -50%) !important; /* 中心对齐 */
  width: 100%;            /* 横向占满容器 */
}
.page-content {
  border-radius: 0.25rem;
  padding-bottom: 0.5rem !important;
  //border: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color-overlay);
  transition: all ease 0.3s;

  //&:hover {
  //  box-shadow: 0 2px 12px #0000001a;
  //  transition: all ease 0.3s;
  //}
}

/*树形样式*/
.el-tree {

  /* ---- ---- ---- ---- ^（节点对齐）---- ---- ---- ---- */
  .el-tree-node {
    min-height: 32px;
    /* ^ 所有节点 */
    i.el-tree-node__expand-icon {
      padding: 4px;
      width: 18px;
      height: 18px;

      &::before {
        background: var(--tree-bg-expand);
        content: "";
        color: var(--el-color-primary-light-3);
        border-radius: 2px;
        display: block;
        width: 36px;
        height: 36px;
      }

      svg {
        display: none; // 隐藏所有节点的 svg 图标
      }
    }

    /* / 所有节点 */

    /* ^ 已展开的父节点 */
    i.el-tree-node__expand-icon.expanded {
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);

      &::before {
        font-family: element-ui-icons, serif;
        font-style: normal;
        content: "";
        background: var(--tree-bg-expand);
        color: var(--el-color-primary-light-3);
        border-radius: 2px;
        display: block;
        width: 36px;
        height: 36px;
      }
    }

    /* / 已展开的父节点 */

    /* ^ 叶子节点 */
    i.el-tree-node__expand-icon.is-leaf {

      &::before {
        display: none;
      }
    }

    /* ^ 复选框 */
    .el-checkbox {
      margin: 0 7px 0 2px;

      .el-checkbox__inner {
        //width: 14px;
        //height: 14px;
        border-radius: 4px;
        //border: 1px solid #bbb;
      }

      .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {

      }
    }

    /* / 复选框 */

    .el-tree-node__content {
      small {
        font-size: 13px;
      }
    }
  }

  /* ---- ---- ---- ---- /（节点对齐）---- ---- ---- ---- */

  /* ---- ---- ---- ---- ^（文字高亮）---- ---- ---- ---- */
  .el-tree-node.is-current {
    .el-tree-node__content {
      small {
        color: #5e7ce0;
      }
    }

    .el-tree-node__children {
      small {
        color: unset;
      }
    }
  }

  /* ---- ---- ---- ---- /（文字高亮）---- ---- ---- ---- */

  /* ---- ---- ---- ---- ^（新增辅助线）---- ---- ---- ---- */
  /* ^ 树节点 */
  .el-tree-node {
    position: relative;
    width: auto;
    // width: max-content; // 显示文字宽度
    padding-left: 13px;

    &::before {
      width: 1px;
      height: 100%;
      content: '';
      position: absolute;
      top: -38px;
      bottom: 0;
      left: 6px;
      right: auto;
      border-width: 1px;
      border-left: 2px dotted var(--el-color-primary-light-3);
    }

    &::after {
      width: 13px;
      height: 13px;
      content: '';
      position: absolute;
      z-index: 0;
      left: 6px;
      right: auto;
      top: 12px;
      bottom: auto;
      border-width: 1px;
      border-top: 2px dotted var(--el-color-primary-light-3);
    }

    .el-tree-node__content {
      position: relative;
      z-index: 1;
      color: #000;
      padding: 0 6px !important;
      border-radius: 8px;

      &:hover {
        background-color: var(--el-color-primary-light-7);
      }

      /* ^ 复选框 */
      .el-checkbox {
        margin: 0 10px 0 5.5px;
      }

      /* / 复选框 */
    }

    .el-tree-node__children {
      padding-left: 12px;
    }

    &:last-child::before {
      height: 50px;
    }
  }

  /* / 树节点 */

  /* ^ 第一层节点 */
  > .el-tree-node {
    padding-left: 0;


    &::before {
      border-left: none;
    }

    &::after {
      border-top: none;
    }
  }

  /* / 第一层节点 */

  /* ^ 叶子节点 */
  i.el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  /* / 叶子节点 */

  /* ^ 设置子节点左外边距 */
  .el-tree-node__content:has(.is-leaf) {
    // color: #00ffff;
    margin-left: 25px !important;
  }
}


